<template>
  <view class="box">
    <!-- 提示验证码 -->
    <u-notify ref="uNotify" @click.native='copyCode'></u-notify>

    <view class="title">
      当前地点
    </view>

    <view class="box-cell">
      <u-cell-group :border='false'>
        <u-cell :border='false' :title="id?obj.point+obj.building+' '+obj.room:point+building+' '+room">
        </u-cell>
      </u-cell-group>
    </view>

    <view class="title">
      业主信息
    </view>


    <u--form labelPosition="left" ref="form1">
      <u-form-item label="姓名" labelWidth="208rpx" borderBottom>
        <u--input border="none" placeholder="请填写您的真实姓名" v-model="obj.name"></u--input>
      </u-form-item>
      <u-form-item label="性别" labelWidth="208rpx" borderBottom>
        <u-radio-group v-model="obj.gender">
          <u-radio shape="circle" label="男" name="1"></u-radio>
          <u-radio shape="circle" label="女" name="0"></u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="手机号" labelWidth="208rpx" borderBottom>
        <u--input border="none" placeholder="请填写您的手机号" v-model="obj.mobile"></u--input>
        <view slot="right" class="yanzheng">
          <text v-if="flag" @click="getCode">获取验证码</text>
          <u-count-down v-else :time="6 * 1000" format="ss s后可重新发送" @finish=' flag=true'>
          </u-count-down>
        </view>
      </u-form-item>
      <u-form-item label="验证码" labelWidth="208rpx" borderBottom>
        <u--input border="none" placeholder="请填写手机验证码" v-model="code1"></u--input>
      </u-form-item>
    </u--form>

    <view class="box-cell2">
      <u-cell-group :border='false'>
        <u-cell :border='false' title="上传本人身份证照片" label="请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。">
        </u-cell>
      </u-cell-group>
      <view class="pic">
        <image v-if="obj.idcardFrontUrl" :src="obj.idcardFrontUrl" mode="" class="img"></image>
        <u-icon v-if="obj.idcardFrontUrl" @click="del1" name="close-circle" color="#2979ff" size="28"></u-icon>
        <view v-else class="picChoose" @click="chooseImage1">
          <image src="../../static/icon/add.png" mode=""></image>
          <text>上传人像面照片</text>
        </view>
      </view>
      <view class="pic">
        <image v-if="obj.idcardBackUrl" :src="obj.idcardBackUrl" mode="" class="img"></image>
        <u-icon v-if="obj.idcardBackUrl" @click="del2" name="close-circle" color="#2979ff" size="28"></u-icon>
        <view v-else class="picChoose" @click="chooseImage2">
          <image src="../../static/icon/add.png" mode=""></image>
          <text>上传人像面照片</text>
        </view>
      </view>
    </view>
    <life-button icon='../../static/icon/check.png' @click='shenhe'>提交审核</life-button>
  </view>

  </view>
</template>

<script>
  import {
    sendCode
  } from "../../api/login.js"
  import toast from '@/utils/toast.js'
  import {
    postRoom,
    getRoom
  } from '@/api/house.js'
  export default {
    onLoad({
      id
    }) {
      if (!id) return
      uni.setNavigationBarTitle({
        title: "修改房屋信息"
      })
      this.id = id
      this.getRoom(id)
    },
    data() {
      return {
        obj: {
          // 小区信息
          point: null,
          // 小区楼栋信息
          building: null,
          // 小区房间信息
          room: null,
          // 业主名字
          name: null,
          // 性别
          gender: "1",
          // 电话
          mobile: null,
          // 身份证
          idcardFrontUrl: null,
          idcardBackUrl: null
        },
        flag: true,
        code: null,
        code1: null,
        id: null
      }
    },
    computed: {
      point() {
        return this.$store.state.house.point
      },
      building() {
        return this.$store.state.house.building
      },
      room() {
        return this.$store.state.house.room
      }
    },
    methods: {
      // 数据回显
      async getRoom(id) {
        const res = await getRoom(id)
        this.obj = res.data
        this.obj.gender = String(this.obj.gender)
      },
      chooseImage1() {
        uni.chooseImage({
          success: (res) => {
            this.obj.idcardFrontUrl = res.tempFilePaths[0]
          }
        })
      },
      chooseImage2() {
        uni.chooseImage({
          success: (res) => {
            this.obj.idcardBackUrl = res.tempFilePaths[0]
          }
        })
      },
      del1() {
        this.obj.idcardFrontUrl = null
      },
      del2() {
        this.obj.idcardBackUrl = null
      },
      // 获取验证码
      async getCode() {

        // 校验手机号
        const mobile = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        if (!mobile.test(this.obj.mobile)) return toast('请输入有效号码')
        // 倒计时开始
        this.flag = false
        const res = await sendCode(this.obj.mobile)
        // console.log(res)
        uni.vibrateLong()
        this.code = res.data.code
        const message = `【享+生活】验证码：${res.data.code}.您正在使用短信验证码功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏。`
        this.$refs.uNotify.show({
          top: 10,
          type: 'success',
          // color: '#000',
          // bgColor: '#e8e8e8',
          message: message,
          duration: 1000 * 3,
          fontSize: 20,
          // safeAreaInsetTop: true
        })

      },
      // 复制验证码
      copyCode() {
        uni.setClipboardData({
          data: this.code
        })
      },
      // 提交审核
      async shenhe() {
        // 中文名字正则
        const name = /^(?:[\u4e00-\u9fa5·]{2,16})$/
        // 电话正则
        const mobile = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        if (!name.test(this.obj.name)) return toast('请输入中文姓名')
        if (!mobile.test(this.obj.mobile)) return toast('请输入有效号码')
        if (!this.code1) return toast('请填写验证码')
        if (!this.obj.idcardFrontUrl) return toast('请上传身份证正面')
        if (!this.obj.idcardBackUrl) return toast('请上传身份证反面')
        // console.log(1)
        if (this.id) {
          const data = {
            ...this.obj,
            gender: this.obj.gender - 0
          }
          delete data.status
          // console.log(data)
          const res = await postRoom(data)
          console.log("修改成功")
        } else {
          const data = {
            ...this.obj,
            point: this.point,
            building: this.building,
            room: this.room,
            gender: this.obj.gender - 0
          }
          // console.log(data)
          const res = await postRoom(data)
          console.log("添加成功")
        }
        // console.log(res)
        uni.navigateTo({
          url: '/pkg-house/house/house'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .box {
    height: 100%;
    background-color: #FAFAFA;
    padding-bottom: 650rpx;

    .title {
      padding: 0 30rpx;
      line-height: 86rpx;
      color: #979797;
      font-size: 24rpx;
    }

    ::v-deep .u-cell__body {
      background: #ffffff;
      height: 102rpx;
      // padding: 0;
      // margin: 0 15px;
      border-bottom: 1px solid #FAFAFA;
    }

    ::v-deep .u-form-item__body {
      background: #fff;
      height: 102rpx;
      padding: 30rpx;
      box-sizing: border-box;
    }

    ::v-deep .u-radio {
      margin-right: 50rpx;
    }

    .yanzheng {
      color: #5591AF;
      font-size: 28rpx;
    }

    ::v-deep .u-count-down__text {
      color: #5591AF;
      font-size: 28rpx;
    }

    .box-cell2 {
      margin-top: 30rpx;
      padding: 0 30rpx 30rpx;
      background: #ffffff;

      ::v-deep .u-cell__body {
        padding: 30rpx 0;
        height: unset;

        .u-cell__title-text {
          font-size: 28rpx;
          color: #333333;
        }

        .u-cell__label {
          color: #C3C3C5;
          font-size: 22rpx;
        }
      }

      .pic {
        height: 340rpx;
        margin-top: 20rpx;
        border-radius: 10rpx;
        background: #FAFAFA;
        position: relative;

        ::v-deep .u-icon--right {
          position: absolute;
          right: 0;
          top: 0;
          z-index: 999;
        }

        .img {
          width: 100%;
          height: 100%;
        }

        .picChoose {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          image {
            width: 40rpx;
            height: 40rpx;
            margin-bottom: 15rpx;
          }

          text {
            color: #7694B0;
            font-size: 30rpx;
          }
        }
      }
    }
  }
</style>
